<template>
    <div class="Cpsylb-vue">

        <el-row :gutter="24">
            <el-col :span="6" :sm="6" :xs="24">
                <h2 class="section-title">产品溯源列表</h2>
            </el-col>
            <el-col :span="18" :sm="18" :xs="24">
                <el-row >
                    <el-col :offset="16" :span="4">
                        <el-select v-model="selectedCategory" placeholder="全部类别" style="margin-right: 10px;">
                            <el-option label="类别1" value="category1" />
                            <el-option label="类别2" value="category2" />
                        </el-select>
                    </el-col>
                    <el-col :span="4">
                        <el-select v-model="selectedArea" placeholder="全部地区">
                            <el-option label="地区1" value="area1" />
                            <el-option label="地区2" value="area2" />
                        </el-select>
                    </el-col>
                </el-row>
            </el-col>
        </el-row>
        
        <el-row :gutter="24" :align="end">
            <el-col :span="6" v-for="(item, index) in ArchiveData" :key="index">
                <CpsylbCard :item="item"/>
            </el-col>
        </el-row>
    </div>
</template>

<script setup>

import { listArchive } from '@/api/ncpsy/management/archive';
import { ref } from 'vue';
import CpsylbCard from './CpsylbCard.vue'

const ArchiveData=ref([])
const selectedCategory = ref('')
const selectedArea = ref('')
// 发送请求，调用 listArchive 方法获取数据
const fetchArchiveData = async () => {
  try {
    const response = await listArchive();
    ArchiveData.value = response.rows || [];
    console.log('获取到的归档数据:', ArchiveData);
  } catch (error) {
    console.error('获取归档数据失败:', error);
  }
};

// 调用获取数据的函数

import { onMounted } from 'vue';

onMounted(() => {
  fetchArchiveData();
});

</script>

<style scoped>
.Cpsylb-vue {
    min-height: 100vh;
    background-color: #f9fafb;
    padding: 30px 60px;
    /* 与父容器保持间距 */
    /* overflow-x: hidden; */
}
</style>